<template>
	<view>
		<view class="swiperBox">
		  <swiper
		    class="swiper"
		    autoplay="true"
		    circular="true"
		    indicator-dots="true"
		    indicator-active-color="white"
		    interval="4000"
		  >
		    <swiper-item v-for="(item,i) in swiperList"  :key="i" class="swiperImg-item">
		      <image :src="item" mode="widthFix"/>
		    </swiper-item>
		  </swiper>
		</view>
		
		
		<view class="displayBox">
		  <!-- 展区图片 -->
		  <view class="display-area" >
		    <view class="dis-item" v-for="(item, i) in displayAreaList" :key="i">
		      <navigator class="nav" :url="'/subpkg/exhibition/exhibition?id=' + (i+1)" >
		        <image :src="item.img" mode="widthFix"/>
		      </navigator>
		        <text>{{item.text}}</text>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				    swiperList:[
				        "http://8.138.83.48:9000/library/home/home1.jpg",
				        "http://8.138.83.48:9000/library/home/home2.jpg",
				        "http://8.138.83.48:9000/library/home/home3.png",
				        "http://8.138.83.48:9000/library/home/home4.png"
				    ],
				
				
				      //展区
					displayAreaList: [
					  {
						img: "http://8.138.83.48:9000/library/museum/image/kanglingyizhi.jpg",
						text: "康陵展区",
						url: "../../subpkg/klDisplay/klDisplay"
					  }, 
					  {
						img: "http://8.138.83.48:9000/library/museum/image/yunshanzhushui.jpg",
						text: "云山珠水间",
						url: "../../subpkg/ysDisplay/ysDisplay"
					  },
					  {
						img:  "http://8.138.83.48:9000/library/museum/image/hanfengtangyun.png",
						text: "汉风唐韵",
						url: "../../subpkg/hfDisplay/hfDisplay"
					  },
					  {
						img: "http://8.138.83.48:9000/library/museum/image/kaoguzhongxin.jpg",
						text: "考古中心",
						url: "../../subpkg/kgDisplay/kgDisplay"
					  }
					],
			};
		}
	}
</script>

<style lang="scss">
/* 轮播图 */
.swiperImg-list {
  /* background-color: #6bae91; */
  background-color: #e0e7c8;
  /* background-color: #5c2223; */
}
.swiperImg-item {
  display: flex;
  justify-content: center;
}


/* 展区介绍 */
.displayBox {
  /* background-color: #5c2223; */
  display: flex;
  justify-content: center;
}
/* 展区图片样式 */
.display-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dis-item{
  display: flex;
  align-items: center;
  width: 700rpx;
  border: 1px solid white;
  border-radius: 20rpx;
  background-color:white;
  margin-top: 20rpx;
  border-right: 8rpx solid rgba(158, 249, 255, 0.5);
  border-bottom: 8rpx solid rgba(158, 249, 255, 0.5);
}
@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(158, 249, 255, 0.4);
  }
  100% {
     box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}
.dis-item image{
  width: 450rpx;
  border-radius: 25rpx;
  margin: 8rpx 5rpx 0rpx 10rpx;

  animation: animated-border 1.5s infinite;
}
.dis-item text {
  font-size: 40rpx;
  margin-left: 25rpx;
  margin:1rpx
}
</style>
